<template>
    <view class="EditList">
		<view class="EditImg">
		    <image :src="editImg"></image>
		    <text class="uploadBtn" @click="upload">点击上传头像</text>
		</view>
        <view class="Edit">
            <view class="tit">{{name}}</view>
            <input class="editForm" type="text" v-model="addressData.name" placeholder="请输入昵称" placeholder-class="placeholder" />
        </view>
        <view class="Edit">
            <view class="tit">{{gender}}</view>
            <picker @change="bindPickerChange" :value="index" :range="array" class="editForm">
				<view class="uni-input">{{array[index]}}</view>
			</picker>
        </view>
        <view class="Edit">
            <view class="tit">{{mailbox}}</view>
            <input class="editForm" type="text" v-model="addressData.room" placeholder="请输入邮箱" placeholder-class="placeholder" />
        </view>
        <view class="Edit">
            <view class="tit">{{brief}}</view>
            <input class="editForm" type="text" v-model="addressData.rank" placeholder="马上填写" placeholder-class="placeholder" />
        </view>

        <button class="erveBtn" @click="confirm" size="mini" type="default">保存</button>
    </view>
</template>

<script>
    export default {
		
        data() {
            return {
				editImg:'https://b1-q.mafengwo.net/s15/M00/32/4D/CoUBGV3qZgGAWN3mAAc8NR-YDhU219.jpg',
				name:'姓名',
				gender:'性别',
				array: ['男', '女'],
				index: 0,
				mailbox:'邮箱',
				brief:'简介',
				
                addressData: {
                    name: '',
                    mobile: '',
                    rank: '',
                    room: '',
                },
            }
        },
        //onLoad(option) {},
        methods: {
            //提交
            confirm() {
                let data = this.addressData;
                console.log(JSON.stringify(data))

            },
			
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			
			
			
        }
    }
</script>

<style lang="scss">
@import "../../icon/iconfont.css";
.EditList {
	letter-spacing: $uni-spacing-row-xm;
	font-size: $uni-font-size-base;
	.EditImg{
		border-top: 1rpx solid $uni-bg-color-grey;
		border-bottom: 1rpx solid $uni-bg-color-grey;
		text-align: center;
		padding: 60rpx 0 50rpx;
		image{
			width: 140rpx;
			height: 140rpx;
			border-radius: 100%;
		}
		.uploadBtn{
			display: block;
			width: 100%;
			padding-top: 20rpx;
		}
	}
	.Edit{
		border-bottom: 1rpx solid $uni-bg-color-grey;
		display: flex;
		flex-direction:row;
		padding: 20rpx 30rpx;
		.tit{
			flex:1
		}
		.editForm{
			flex: 5;
			font-size: $uni-font-size-base;
		}
		.placeholder{
			color: $uni-text-color-grey;
			font-size: $uni-font-size-base;
		}
	}
	.erveBtn{
		color: $uni-text-color-inverse;
		height: 80rpx;
		line-height: 80rpx;
		width: 50%;
		margin: 25% 25% 0;
		font-size: $uni-font-size-thirty;
		letter-spacing: $uni-spacing-row-dm;
		background:linear-gradient(90deg,#ff9d4e,#ff7156,#ff4B5e);
	}
}
</style>
